<template>
  <div class="coupon">
    <el-breadcrumb separator="/">
      <el-breadcrumb-item>活动管理</el-breadcrumb-item>
      <el-breadcrumb-item>活动列表</el-breadcrumb-item>
    </el-breadcrumb>
    <div class="easy-content">
      <el-form :inline="true">
        <el-form-item>
          <el-input placeholder="请输入活动名称、编号或创建人姓名"
            v-model="search"
            clearable
            style="width:300px"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary"
            size="small"
            @click="_reset"
            style=" line-height: 32px;padding: 0 21px;">
            <i class="el-icon-search"></i>
          </el-button>
        </el-form-item>
        <el-form-item class="fr">
          <el-button type="primary"
            @click="add"
            size="small">
            新增活动
          </el-button>
        </el-form-item>
      </el-form>
      <el-form>
        <el-form-item>
          <el-table max-height="550"
            :data="tableData">
            <el-table-column label="ID"
              prop="id">
            </el-table-column>
            <el-table-column label="创建时间"
              prop="createTime">
            </el-table-column>
            <el-table-column label="创建人"
              prop="person">
            </el-table-column>
            <el-table-column label="活动名称"
              prop="name">
            </el-table-column>
            <el-table-column label="优惠券"
              prop="couponName">
            </el-table-column>
            <el-table-column label="上线/所有批次数"
              prop="num">
            </el-table-column>
            <el-table-column label="领取次数限制"
              prop="getNum">
            </el-table-column>
            <el-table-column label="操作">
              <template slot-scope="scope">
                <el-button type="text"
                  @click="setList(scope.row.id)">发放批次列表</el-button>
                <el-button type="text"
                  @click="activityEdit(scope.row.id)">活动设置</el-button>
              </template>
            </el-table-column>
          </el-table>
        </el-form-item>
        <el-form-item class="fr">
          <el-pagination @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="pageNum"
            :page-sizes="[10, 20, 30, 40]"
            :page-size="pageSize"
            layout="total, prev , pager , next, sizes"
            :total="total"
            style="margin-top:20px">
          </el-pagination>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script>
import { getActivityList } from "@/public/js/coupon.js";
export default {
  components: {},
  props: {},
  data() {
    return {
      total: 2,
      pageNum: 1,
      pageSize: 10,
      search: "",
      tableData: []
    };
  },
  watch: {},
  computed: {},
  methods: {
    //翻页查询
    handleSizeChange(pageSize) {
      this.pageSize = pageSize;
      this._getActivityList();
    },
    handleCurrentChange(pageNum) {
      this.pageNum = pageNum;
      this._getActivityList();
    },
    _getActivityList() {
      getActivityList({
        pageSize: this.pageSize,
        pageNum: this.pageNum,
        search: this.search
      }).then(res => {
        this.tableData = res.data.buys;
        this.total = res.data.total;
      });
    },
    _reset() {
      this.pageSize = 10;
      this.pageNum = 1;
      this._getActivityList();
    },
    //新增优惠券
    add() {
      this.$router.push("/index/coupon-add-edit");
    },
    //发放列表
    setList(id) {
      this.$router.push("/index/grant-list?id=" + id);
    },
    // 活动设置
    activityEdit(id) {
      this.$router.push("/index/coupon-add-edit?id=" + id);
    }
  },
  created() {
    this._getActivityList();
  },
  mounted() {}
};
</script>
<style lang="scss" scoped>
.wrapper {
}
</style>